<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav-bar" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
			<view class="nav-back" @click="navigateBack">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<text class="nav-title">魔芋丝凉拌</text>
		</view>

		<!-- 轮播图 -->
		<swiper class="main-swiper" indicator-dots autoplay>
			<swiper-item v-for="(img, index) in swiperImages" :key="index">
				<image class="swiper-img" :src="img" mode="aspectFill" />
			</swiper-item>
		</swiper>

		<!-- 内容区域 -->
		<view class="content-box">
			<view class="title-section">
				<text class="main-title">魔芋丝凉拌</text>
				<view class="sub-title">「家常菜」</view>
				<view class="certification">（家庭料理协会认证）</view>

				<view class="info-row">
					<text>【烹饪时长】15分钟</text>
					<text>【难度等级】★☆☆☆☆</text>
					<text>30kcal/人</text>
				</view>
			</view>

			<!-- 数据交互栏 -->
			<view class="data-bar">
				<block v-for="(item, index) in dataItems" :key="index">
					<view class="data-item" @click="toggleItem(index)">
						<uni-icons :type="item.active ? item.activeType : item.type"
							:color="item.active ? item.activeColor : '#999'" size="40" />
						<text :style="{color: item.active ? item.activeColor : '#999'}">
							{{ item.text }}
						</text>
					</view>
					<view class="divider" v-if="index !== dataItems.length-1"></view>
				</block>
			</view>

			<!-- 作者信息 -->
			<view class="author-box">
				<image class="avatar" src="/static/kkkkk.jpg" />
				<view class="author-info">
					<view class="author-title">
						<text class="icon">👨🍳</text>
						<text>食谱作者：美食品鉴师宇帆</text>
					</view>
					<text class="author-sub">（认证厨师·料理节目常驻嘉宾）</text>
				</view>
			</view>

			<!-- 食材清单 -->
			<view class="card-box ingredient">
				<view class="card-title">🥕 食材清单</view>
				<view class="card-content">
					<view class="ingredient-item" v-for="(item, index) in ingredients" :key="index">
						<text class="name">{{ item.name }}</text>
						<text class="line"></text>
						<text class="amount">{{ item.amount }}</text>
					</view>
				</view>
			</view>

			<!-- 步骤模块 -->
			<view class="card-box steps">
				<view class="card-title">🍳 烹饪步骤</view>
				<view class="step-list">
					<view class="step-item" v-for="(step, index) in visibleSteps" :key="index">
						<view class="step-header">
							<text class="step-num">步骤{{ index + 1 }}</text>
						</view>
						<text class="step-desc">{{ step.desc }}</text>
						<image v-if="step.img && showStepImages" class="step-img" :src="step.img" mode="widthFix" />
					</view>
				</view>
				<button class="fold-btn" @click="toggleSteps">
					{{ isStepsFolded ? '展开完整步骤' : '折叠步骤' }}
				</button>
			</view>

			<!-- 底部推荐 -->
			<view class="recommend-box">
				<text class="section-title">更多相关</text>
				<scroll-view scroll-x class="recommend-scroll">
					<view v-for="(item, i) in recommendations" :key="i" class="recommend-item">
						<image class="recommend-img" :src="item.img" />
						<view class="recommend-info">
							<text class="recommend-title">{{ item.title }}</text>
							<text class="recommend-desc">{{ item.desc }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 悬浮按钮 -->
		<view class="float-btn" @click="scrollToTop">
			<uni-icons type="arrow-up" size="26" color="#fff" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				safeAreaInsets: { top: 0, bottom: 0 },
				isStepsFolded: true,
				swiperImages: [
					'/static/魔芋丝凉拌/1.jpg',
					'/static/魔芋丝凉拌/2.jpg',
					'/static/魔芋丝凉拌/3.jpg'
				],
				dataItems: [
					{ type: 'heart', activeType: 'heart-filled', text: '2.1K', activeColor: '#FF4500', active: false },
					{ type: 'chat', activeType: 'chat-filled', text: '326', activeColor: '#1E90FF', active: true },
					{ type: 'eye', activeType: 'eye-filled', text: '25.7K', activeColor: '#32CD32', active: true },
					{ type: 'download', text: 'PDF(5.6MB)', active: false, activeColor: '#999' },
					{ type: 'star', activeType: 'star-filled', text: '收藏', activeColor: '#FFD700', active: false }
				],
				ingredients: [
					{ name: '魔芋丝', amount: '200g（清水浸泡10分钟）' },
					{ name: '黄瓜', amount: '1/2根（切细丝）' },
					{ name: '胡萝卜', amount: '1/4根（切细丝）' },
					{ name: '小米椒', amount: '2个（切圈）' },
					{ name: '蒜末', amount: '10g' },
					{ name: '白芝麻', amount: '5g（熟制）' },
					{ name: '调味汁', amount: '生抽15ml+香醋10ml+代糖2g+芝麻油3ml' }
				],
				showStepImages: true,
				steps: [
					{ desc: '魔芋处理：水沸后加5ml白醋，魔芋丝焯水2分钟去除碱味' },
					{ desc: '冰镇爽脆：焯好的魔芋丝立即浸冰水，挤干水分备用' },
					{ desc: '调味核心：蒜末+小米椒用热油5ml激香，加入预调酱汁' },
					{ desc: '拌匀技巧：所有食材用料理盆抛拌（避免筷子搅拌断裂）' }
				],
				recommendations: [
					{ img: "/static/d01.jpg", title: "泰式绿咖喱鸡", desc: "椰香浓郁 微辣开胃" },
					{ img: "/static/d02.jpg", title: "印度黄油鸡", desc: "浓郁奶香 香料层次丰富" },
					{ img: "/static/d03.jpg", title: "日式味噌汤", desc: "搭配秘籍 3种汤底配方" },
					{ img: "/static/d04.jpg", title: "咖喱保存技巧", desc: "冷藏冷冻指南 风味保持" }
				]
			};
		},
		computed: {
			visibleSteps() {
				return this.isStepsFolded ? this.steps.slice(0, 2) : this.steps
			}
		},
		onLoad() {
			this.getSafeAreaInsets();
		},
		methods: {
			navigateBack() {
				uni.navigateBack();
			},
			toggleItem(index) {
				const item = this.dataItems[index];
				if (['chat', 'eye'].includes(item.type)) return;
				if (item.type === 'download') return this.downloadFile();

				item.active = !item.active;
				if (item.type === 'heart') {
					item.text = `${(parseFloat(item.text) + (item.active ? 0.1 : -0.1)).toFixed(1)}K`;
				}
				this.$set(this.dataItems, index, item);
			},
			downloadFile() {
				uni.showToast({ title: '开始下载PDF文件', icon: 'none' });
			},
			toggleSteps() {
				this.isStepsFolded = !this.isStepsFolded
			},
			scrollToTop() {
				uni.pageScrollTo({ scrollTop: 0, duration: 300 });
			},
			getSafeAreaInsets() {
				uni.getSystemInfo({
					success: (res) => {
						this.safeAreaInsets = {
							top: res.safeArea?.top ?? res.statusBarHeight,
							bottom: res.safeArea?.bottom ?? 0
						};
					}
				});
			}
		}
	}
</script>

<style lang="css">
	@import"../../static/style/recipe-details.css";
</style>